<template>
	<div class="customerinformation">
		<div class="myselfmeans" v-for="(item,index) in list" :style="{borderTop:item.border,marginBottom:item.margin+'px'}" @click="goNext(item)" >
		  <i :class="item.icon" :style="{color:item.color}"></i>
		  <p class="myselftitle">{{item.title}}</p>
		  <p class="count" v-if="item.title=='待付款' && count.notPaiedCount != 0" >{{count.notPaiedCount}}</p>
		  <p class="count" v-else-if="item.title=='待取货' && count.waitForPickCount !=0">{{count.waitForPickCount}}</p>
          <p class="count" v-else-if="item.title=='我的租赁' && count.rentingCount != 0">{{count.rentingCount}}</p>
		  <p class="count" v-else-if="item.title=='结算订单' && count.settlingCount != 0">{{count.settlingCount}}</p>
		  <i :class="item.icon2"></i>
		</div>
	</div>
</template>

<script>
import { data } from '@/common/js/data'
export default {
	name: 'customerinformation',
	data() {
		return {
			list: data.list,
			count: ''
		}
	},
	mounted() {
          this.getOrderCount()
	},
	methods: {
		//获取订单数量
		getOrderCount() {
			this.$http.get(this.$store.state.reqUrl + '/customer/orders/count', {}).then(res => {
				this.count = res.data;
			})
		},
		//点击
		goNext(item) {
			this.$router.push({
				path: item.path,
				query: {
					interface_url: item.orderlisturl,
					statu:item.statu,
					order_title: item.title,
					style_name: item.stylename,
					style_title: item.styletitle,
					order_time: item.ordertime
				}
			});
		}
	}
}
</script>

<style lang="less" scoped>
    .customerinformation{
    	width:100%;
    	.myselfmeans{
    		width:100%;
    		background: #FFFFFF;
    		height: 100px;  
    		border-bottom: 1px solid gainsboro;		
    		display: flex;
    		.iconmemans{
    			width:100px;
    			text-align: center;
    			font-size: 52px;
    			line-height: 100px;
    		}
    		.myselftitle{
    			font-size: 32px;
    			flex: 1;
    			line-height: 100px;
    		}
    		.count{
    			line-height: 100px;
    		    font-size: 24px;
    		    text-align: center;
    		}
    			/*.count{   				
    			min-height: 30px;
    			min-width: 30px;
    			font-size: 20px;
    			color: #FF0000;
    			text-align: center;
    			line-height: 30px;
    			border-radius: 100%;
    			border:2px solid #FF0000;
    		  }*/
    		.more{
    			font-size: 32px;
    			color: gray;
    			width:80px;
    			text-align: center;
    			line-height: 100px;
    		}
    	}
    }
</style>